<template>
  <div>
    <div class="item-title">
      租户用量排名
    </div>
    <div class="item-body" @mousemove="move">
        <el-radio-group v-model="type" size="mini" @change="handleTypeChange">
          <el-radio-button label="电"></el-radio-button>
          <el-radio-button label="水"></el-radio-button>
          <el-radio-button label="气"></el-radio-button>
          <el-radio-button label="热"></el-radio-button>
        </el-radio-group>
        <div class="month-style">{{month}}</div>
        <div class="table" @mouseleave="leave">
          <dv-scroll-board @mouseover="over" :config="config" style="width:100%;height:200px;margin-top: 10px" />
          <p
            v-if="tipShow"
            class="dv-text"
            :style="{ top: dvText.keyY, left: dvText.keyX }"
          >
            {{ dvText.name }}
          </p>
      </div>
    </div>
  </div>
</template>
<script>
import {getEnergyUseRankData} from '@/api/bigScreen'
import moment from 'moment';
export default {
  name: 'TenantUsageRanking',
  data() {
    return {
      dvText: {
        name: '',
        keyY: '',
        keyX: '',
      },
      tipShow: false, // 控制tooltip显隐
      type: '电',
      month: moment().subtract(1, 'month').format('YYYY-MM'),
      config:{
        header: ['排名', '租户名称', '用电量', '环比（%）'],
        data: [
          // ['1', '叶一飞（康复训练）', '420', '15'],
          // ['2', '吕耿彪', '417', '13'],
          // ['3', '中建二局第三建筑工程有限公司', '380', '14'],
          // ['4', '刘长荣', '845', '3'],
          // ['5', '张建凤', '814', '6'],
          // ['6', '李红珍', '801', '14'],
          // ['7', '朱艳(喜茶)', '756', '23'],
          // ['8', '劳洁怡', '734', '2'],
          // ['9', '陈立志', '731', '7'],
          // ['10', '杨鹏', '702', '14']
        ],
        index: false,
        columnWidth: [60],
        align: ['center','center','center','center'],
        oddRowBGC:'#0b1e3b',
        evenRowBGC:'#123271',
        headerBGC:'#01193f',
        waitTime: 2000,
        // carousel: 'page'
      }
    }
  },
  mounted() {
    this.getEnergyUseRank(1);
  },
  watch:{
  },
  methods: {
    handleTypeChange(e) {
      if(e === '电'){
        this.config.header = ['排名', '租户名称', '用电量', '环比（%）'];
        this.getEnergyUseRank(1);
      }else if(e === '水'){
        this.config.header = ['排名', '租户名称', '用水量', '环比（%）'];
        this.getEnergyUseRank(2);
      }else if(e === '气'){
        this.config.header = ['排名', '租户名称', '用气量', '环比（%）'];
        this.getEnergyUseRank(3);
      }else if(e === '热'){
        this.config.header = ['排名', '租户名称', '用热量', '环比（%）'];
        this.getEnergyUseRank(4);
      }
    },
    getEnergyUseRank(energyType){
      getEnergyUseRankData({energyType:energyType}).then(response => {
        if(response.code === 200) {
          this.config.data = [];
          if(response.data.length>0){
            let dataArr = new Array();
            for (let i = 0; i < response.data.length; i++) {
              const element = response.data[i];
              dataArr.push(i+1);
              dataArr.push(element.userName);
              dataArr.push(element.totalFlow);
              dataArr.push(element.hb);
            }
            this.config.data = [dataArr];
          }
          this.config={...this.config}
        }
      })
    },
    over(dom) {
      this.tipShow = true
      //v.ceil拿到单元格数据
      this.dvText.name = dom.ceil
      //没有值则直接隐藏悬浮框 不然如果设置padding会有背景
      if (this.dvText.name === undefined) {
        this.tipShow = false
      }
    },
    move(e) {
      this.dvText.keyX = e.pageX + 'px'
      this.dvText.keyY = e.pageY - 60 + 'px'
    },
    leave() {
      this.tipShow = false;
    },
  }
}
</script>
<!--<style src="../../../assets/static/css/bigscreen.css" scoped></style>-->
<style lang="scss" scoped>
.item-body {
  padding: 0 10px;
  //cursor: pointer;
  // ::v-deep .dv-scroll-board .header .header-item{
  //   border: 1px solid #42b2fe !important;
  //   margin-left: -1px !important;
  // }
  // ::v-deep .dv-scroll-board .rows{
  //   border-left: 1px solid #42b2fe !important;
  //   margin-left: -1px !important;
  // }
  // ::v-deep .dv-scroll-board .rows .ceil{
  //   border: 1px solid #42b2fe !important;
  //   margin-left: -1px !important;
  //   margin-top: -1px !important;
  // }
  // ::v-deep .el-radio-button__inner{
  //   background: transparent !important;
  //   border: 1px solid #42b2fe !important;
  //   margin-left: -1px !important;
  //   color: #fff;
  // }
  // ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner{
  //   color: #42b2fe;
  // }
}
.dv-text {
  //background: #666;
  padding: 5px;
  font-size: 14px;
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0;
}
.month-style{
  width: 100px;
  display: inline-block;
  margin-left: 138px;
  line-height: 23px;
  font-size: 16px;
}
.table{
  cursor: pointer;
}
</style>
